<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/lcRem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		
		<div class="page startGame">
			<button class="startBtn">开始答题</button>
		</div>
		<div class="page gaming">
			<div class="clock">10</div>
			<h1 class="timu"></h1>
			<div class="main">
				
			</div>
		</div>
		<div class="page endGame">
			<h2>恭喜你答对<span class="num">0</span>题！</h2>
			<h3>历史最高连续答题数：<span class="maxNum">0</span></h3>
			<div class="reStart">重新开始</div>
		</div>
		<script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var startBtn  = document.querySelector('.startBtn')
			var gamingPage = document.querySelector('.gaming')
			var endPage = document.querySelector('.endGame')
			var main = document.querySelector('.main');
			var h1 = document.querySelector('.timu');
			var reStart = document.querySelector('.reStart')
			var clockDom = document.querySelector('.clock')
			var timuList = []
			var currentTimu = null;
			//记录答题数量
			var score = 0;
			//计时器的ID值
			var clockId;
			
			function renderTimu(){
				clock10()
				var randomNum = parseInt(Math.random()*timuList.length) 
				var del = timuList.splice(randomNum,1);
				currentTimu = del[0]
				console.log(del)
				h1.innerHTML = currentTimu.quiz;
				main.innerHTML = ""
				//循环生成选项
				currentTimu.options.forEach(function(item,index){
					var newDiv = document.createElement('div')
					newDiv.className = "optionItem";
					newDiv.dataset.index = index+1;
					newDiv.innerHTML = (index+1)+"、"+item;
					main.appendChild(newDiv)
				})
				
			}
			function clock10(){
				var num = 10;
				clockDom.innerHTML = num;
				clockId = setInterval(function(){
					num --;
					clockDom.innerHTML = num;
					if(num==0){
						endGame()
					}
				},1000)
			}
			
			
			ajax('js/dati.json',function(xhr){
				timuList = JSON.parse(xhr.responseText)
				console.log(timuList)
				
				startBtn.onclick = function(){
					gamingPage.style.zIndex = 100;
					renderTimu()
					
				}
			})
			
			main.addEventListener('click',function(e){
				
				if(e.target.className =="optionItem"){
					//console.log(e)
					clearInterval(clockId)
					var index = e.target.dataset.index;
					//判断当前选中的题目是否是正确的答案
					if(currentTimu.answer == index){
						
						score++;
						e.target.style.backgroundColor = 'yellowgreen'
						setTimeout(function(){
							renderTimu()
						},2000)
					}else{
						e.target.style.backgroundColor = 'deeppink'
						var curAnswerDom  = document.querySelector('.optionItem:nth-child('+currentTimu.answer+')');
						curAnswerDom.style.backgroundColor = 'yellowgreen';
						setTimeout(function(){
							endGame()
						},2000)
					}
				}
			})
			
			reStart.onclick = function(){
				location.reload()
			}
			
			//因为函数声明的提升，所以此函数可以写在后面
			function endGame(){
				endPage.style.zIndex = '1000';
				var scoreDom = document.querySelector('.num');
				var scoreMaxDom = document.querySelector('.maxNum')
				scoreDom.innerHTML = score;
				if(localStorage.datiMaxScore){
					scoreMaxDom.innerHTML = localStorage.datiMaxScore;
					if(localStorage.datiMaxScore<score){
						localStorage.datiMaxScore = score;
					}
					
				}else{
					scoreMaxDom.innerHTML = score;
					localStorage.datiMaxScore = score;
				}
			}
		</script>
	</body>
</html>
